<%--
  Created by IntelliJ IDEA.
  User: Tang'ya'kang
  Date: 2023/5/10
  Time: 20:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            position: relative;
        }
        .box1{
            border-radius: 2%;
            box-shadow: 0 5px 10px #666;
            padding: 10px;
            float: left;
            border: 5px solid transparent;
            margin-left: 0;
            margin-top: 0;
        }
        .box1:hover{
            border-radius: 2%;
            box-shadow: 0 5px 10px #666;
            padding: 10px;
            float: left;
            margin-left: 0;
            margin-top: 0;
            border: 5px solid dodgerblue;
        }
        #css{
            margin: 10px;
            column-count: 3;
            column-gap: 10px;
        }
        #css1{
            margin-bottom: 10px;
        }
        #css1 img{
            border-radius: 2%;
            width: 200px;
            height:200px;
        }
        span{
            font-size: 20px;
            background: white;
        }
        body{
            background-image: url("/html/src/index.html");
        }
    </style>

</head>
<body>
    <%@ include file="head.jsp"%>
    <script>
        $(function () {
            $(".btn-primary").click(function () {
                location.href="http://localhost:8080/JaveWeb/cartServlet?action=addItem&id="+$(this).attr("id");
            });
        });
    </script>

    <div class="card" id="css">
        <h5 align="center">图书展示</h5>
        <div class="card-body" id="css1">
            <c:forEach items="${requestScope.books}" var="book">
<%--<<<<<<< HEAD--%>
<%--                <span class="box1">--%>
<%--                <img src="uploads/${book.getimg_path()}" align="center"><br/>--%>
<%--=======--%>
                <span class="box1" style="margin: 10px">
                <img src="uploads/${book.getimg_path()}" width="200px" height="200px" align="center"><br/>
<%-->>>>>>> origin/master--%>
                <span>名称:${book.name}</span><br/>
                <span>作者:${book.author}</span><br/>
                <span>价格:￥${book.price}</span><br/>
                <span>销量:${book.sales}</span><br/>
                <span>库存:${book.stock}</span><br/>
                <div align="center" style="left: -28px"><span><button type="button" class="btn btn-primary"style="margin-left: 50px" id="${book.id}">加入购物车</button></span></div>
            </span>
            </c:forEach>
        </div>
        <%@ include file="./FootPage.jsp"%>
    </div>
</body>
</html>
